<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="6">
                <div class="container">
                    <el-col id="header">
                        <span>{{peerNodeStore.peerNodeName}}</span>
                    </el-col>
                    <el-col>
                        <el-main>
                            <el-select class="options" v-model="commandSelected" @change="handleSelectionChange()">
                                <el-option label="启动节点" value="1" />
                                <el-option label="停止节点" value="2" />
                                <el-option label="通道清单" value="3" />
                                <el-option label="加入通道" value="4" />
                                <el-option label="获取通道信息" value="5" />
                                <el-option label="安装链码" value="6" />
                                <el-option label="链码清单" value="7" />
                                <el-option label="初始化链码" value="8" />
                                <el-option label="调用链码" value="9" />
                                <el-option label="查询链码" value="10" />
                            </el-select>
                            <el-select class="options" v-model="channel.name" :style="{display: joinChannelVisible}">
                                <el-option v-for="option in channelOptions" :key="option.value" :label="option.label"
                                    :value="option.value"></el-option>
                            </el-select>

                            <el-select class="options" v-model="channel.name" :style="{display: getChannelInfoVisible}">
                                <el-option v-for="option in channelOptions" :key="option.value" :label="option.label"
                                    :value="option.value"></el-option>
                            </el-select>

                            <el-select class="options" v-model="chaincode.name"
                                :style="{display: installListCodeVisible}">
                                <el-option v-for="option in chaincodeOptions" :key="option.value" :label="option.label"
                                    :value="option.value"></el-option>
                            </el-select>

                            <el-select class="options" v-model="channel.name" :style="{display: listCodeVisible}">
                                <el-option v-for="option in channelOptions" :key="option.value" :label="option.label"
                                    :value="option.value"></el-option>
                            </el-select>
                            <el-select class="options" v-model="chaincode.name" :style="{display: listCodeVisible}"
                                @change="handleChainCodeChanged()">
                                <el-option v-for="option in chaincodeOptions" :key="option.value" :label="option.label"
                                    :value="option.value"></el-option>
                            </el-select>
                            <br>
                            <el-title class="options" :style="{display: listCodeVisible}">Json*</el-title>
                            <el-input v-model="jsonInput.input" :style="{display: listCodeVisible}"></el-input>
                            <el-button class="options" type="primary" @click="runCommand()">执行命令</el-button>
                        </el-main>

                    </el-col>
                </div>
            </el-col>
            <el-col :span="18">
                <div class="container">
                    <el-col id="header">
                        日志
                    </el-col>
                    <el-scrollbar height="700px">
                        <div style="white-space: pre-line; margin: 10px">{{ msg }}</div>
                    </el-scrollbar>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
  
<script lang="ts" setup>
import { ref, reactive } from "vue";
import axios from 'axios';
import { usePeerNodeStore } from '../store/peerConsole';
import { chain } from "lodash";

const peerNodeStore = usePeerNodeStore();           // peer节点store

const msg = ref() as any;                      // 日志

// 加入通道时的额外选项
const joinChannelVisible = ref("none");

// 获取通道信息时的额外选项
const getChannelInfoVisible = ref("none");

// 安装链码时的额外选项
const installListCodeVisible = ref("none");

// 初始化链码时的额外选项
// 查询链码时的额外选项
// 调用链码时的额外选项
const listCodeVisible = ref("none");

const commandSelected = ref();

// 选项框选项改变时的动作
const handleSelectionChange = () => {
    joinChannelVisible.value = "none";
    getChannelInfoVisible.value = "none";
    installListCodeVisible.value = "none";
    listCodeVisible.value = "none";
    switch (commandSelected.value) {
        case ("1"): {                               // 启动节点
            break;
        }
        case ("2"): {                               // 停止节点
            break;
        }
        case ("3"): {                               // 通道清单
            break;
        }
        case ("4"): {                               // 加入通道
            joinChannelVisible.value = "";
            getChannelInfo();
            break;
        }
        case ("5"): {                               // 获取通道信息
            getChannelInfoVisible.value = "";
            getChannelInfo();
            break;
        }
        case ("6"): {                               // 安装链码
            installListCodeVisible.value = "";
            getChainCodeInfo();
            break;
        }
        case ("7"): {                               // 链码清单
            break;
        }
        case ("8"): {                               // 初始化链码
            listCodeVisible.value = "";
            getChannelInfo();
            getChainCodeInfo();
            break;
        }
        case ("9"): {                               // 调用链码
            listCodeVisible.value = "";
            getChannelInfo();
            getChainCodeInfo();
            break;
        }
        case ("10"): {                              // 查询链码
            listCodeVisible.value = "";
            getChannelInfo();
            getChainCodeInfo();
            break;
        }
    }
}

// 执行命令
const runCommand = () => {
    switch (commandSelected.value) {
        case ("1"): {                               // 启动节点
            putNodeStart();
            break;
        }
        case ("2"): {                               // 停止节点
            putNodeStop();
            break;
        }
        case ("3"): {                               // 通道清单
            putChannelList();
            break;
        }
        case ("4"): {                               // 加入通道
            putChannelJoin();
            break;
        }
        case ("5"): {                               // 获取通道信息
            putChannelGetInfo();
            break;
        }
        case ("6"): {                               // 安装链码
            putChainCodeInstall();
            break;
        }
        case ("7"): {                               // 链码清单
            putChainCodeList();
            break;
        }
        case ("8"): {                               // 初始化链码
            putChainCodeInit();
            break;
        }
        case ("9"): {                               // 调用链码
            putChainCodeInvoke();
            break;
        }
        case ("10"): {                              // 查询链码
            putChainCodeQuery();
            break;
        }
    }
}

// -------控制台-------
// 获取管道信息
const channelOptions = reactive([]) as any;         // 管道选项
const getChannelInfo = () => {
    channel.name = "";
    channelOptions.splice(0, channelOptions.length);
    axios.get('prefix/api/entity/channels', {
    }).then(function (response) {
        let length = response.data.channels == null ? 0 : response.data.channels.length;
        for (let i = 0; i < length; i++) {
            channelOptions.push({
                label: response.data.channels[i].Name,
                value: response.data.channels[i].Name
            })
        }
        console.log(response);
    }).catch(function (error) {
        console.log(error);
    })
}

// 获取链码信息
const chaincodeOptions = reactive([]) as any;         // 链码选项
const chaincodeInfo = ref([]) as any;
const getChainCodeInfo = () => {
    chaincode.name = "";
    chaincodeOptions.splice(0, chaincodeOptions.length);
    chaincodeInfo.value = [];
    axios.get('prefix/api/entity/chaincodes', {
    }).then(function (response) {
        let length = response.data.chaincodes == null ? 0 : response.data.chaincodes.length;
        for (let i = 0; i < length; i++) {
            if (response.data.chaincodes[i].PeerName == peerNodeStore.peerNodeName) {
                chaincodeOptions.push({
                    label: response.data.chaincodes[i].Name,
                    value: response.data.chaincodes[i].Name
                })
            }
            chaincodeInfo.value.push({
                Name: response.data.chaincodes[i].Name,
                Init: response.data.chaincodes[i].Init,
                Invoke: response.data.chaincodes[i].Invoke,
                Query: response.data.chaincodes[i].Query
            })
        }

        console.log(response);
    }).catch(function (error) {
        console.log(error);
    })
}

// 启动节点(对于输入的参数还存在疑问)
const putNodeStart = () => {
    axios.put('prefix/api/entity/peers/' + peerNodeStore.peerNodeName + '/cmd', {
        Cmd: "NODE_START",
        NodeName: peerNodeStore.peerNodeName,
        Name: "asset_mgmt",
        Version: "1.0",
        Lang: "golang",
        Path: "sacc",
        ChannelId: "",
        // Json: "{\"Args\":[\"a\",\"10\"]}"
    }).then(function (response) {
        //response.data.msg.replace(/(\n|\r|\r\n|↵)/g, '<br/>');
        msg.value = response.data.msg;
        console.log(response);
    }).catch(function (error) {
        console.log(error);
    })
}

// 停止节点
const putNodeStop = () => {
    axios.put('prefix/api/entity/peers/' + peerNodeStore.peerNodeName + '/cmd', {
        Cmd: "NODE_STOP",
        NodeName: peerNodeStore.peerNodeName,
        Name: "asset_mgmt",
        Version: "1.0",
        Lang: "golang",
        Path: "sacc",
        ChannelId: "",
        // Json: "{\"Args\":[\"a\",\"10\"]}"
    }).then(function (response) {
        msg.value = response.data.msg;
        console.log(response);
    }).catch(function (error) {
        console.log(error);
    })
}

// 通道清单
const putChannelList = () => {
    axios.put('prefix/api/entity/peers/' + peerNodeStore.peerNodeName + '/cmd', {
        Cmd: "CHANNEL_LIST",
        NodeName: peerNodeStore.peerNodeName,
        Name: "asset_mgmt",
        Version: "1.0",
        Lang: "golang",
        Path: "sacc",
        ChannelId: "",
        // Json: "{\"Args\":[\"a\",\"10\"]}"
    }).then(function (response) {
        //response.data.msg.replace(/(\n|\r|\r\n|↵)/g, '<br/>');
        msg.value = response.data.msg;
        console.log(response);
    }).catch(function (error) {
        console.log(error);
    })
}

// 加入通道，使用这个模块首先需要获取通道
const channel = reactive({  // 选择的通道
    name: ''
});
const putChannelJoin = () => {
    axios.put('prefix/api/entity/peers/' + peerNodeStore.peerNodeName + '/cmd', {
        Cmd: "CHANNEL_JOIN",
        NodeName: peerNodeStore.peerNodeName,
        Name: "asset_mgmt",
        Version: "1.0",
        Lang: "golang",
        Path: "sacc",
        ChannelId: channel.name,
        // Json: "{\"Args\":[\"a\",\"10\"]}"
    }).then(function (response) {
        msg.value = response.data.msg;
        console.log(response);
    }).catch(function (error) {
        console.log(error);
    })
}

// 获取通道信息
const putChannelGetInfo = () => {
    axios.put('prefix/api/entity/peers/' + peerNodeStore.peerNodeName + '/cmd', {
        Cmd: "CHANNEL_GETINFO",
        NodeName: peerNodeStore.peerNodeName,
        Name: "asset_mgmt",
        Version: "1.0",
        Lang: "golang",
        Path: "sacc",
        ChannelId: channel.name,
        // Json: jsonInput.input
    }).then(function (response) {
        msg.value = response.data.msg;
        console.log(response);
    }).catch(function (error) {
        console.log(error);
    })
}

// 安装链码
const chaincode = reactive({  // 选择的链码
    name: ''
});
const putChainCodeInstall = () => {
    axios.put('prefix/api/entity/peers/' + peerNodeStore.peerNodeName + '/cmd', {
        Cmd: "CHAINCODE_INSTALL",
        NodeName: peerNodeStore.peerNodeName,
        Name: chaincode.name,
        Version: "1.0",
        Lang: "golang",
        Path: "sacc/sacc",
        ChannelId: "",
        Json: jsonInput.input
    }).then(function (response) {
        msg.value = response.data.msg;
        console.log(response);
    }).catch(function (error) {
        console.log(error);
    })
}

// 链码清单
const putChainCodeList = () => {
    axios.put('prefix/api/entity/peers/' + peerNodeStore.peerNodeName + '/cmd', {
        Cmd: "CHAINCODE_LIST",
        NodeName: peerNodeStore.peerNodeName,
        Name: chaincode.name,
        Version: "1.0",
        Lang: "golang",
        Path: "sacc/sacc",
        ChannelId: "",
        // Json: jsonInput.input
    }).then(function (response) {
        msg.value = response.data.msg;
        console.log(response);
    }).catch(function (error) {
        console.log(error);
    })
}

// 初始化链码
const putChainCodeInit = () => {
    axios.put('prefix/api/entity/peers/' + peerNodeStore.peerNodeName + '/cmd', {
        Cmd: "CHAINCODE_INIT",
        NodeName: peerNodeStore.peerNodeName,
        Name: chaincode.name,
        Version: "1.0",
        Lang: "golang",
        Path: "sacc/sacc",
        ChannelId: channel.name,
        Json: jsonInput.input
    }).then(function (response) {
        msg.value = response.data.msg;
        console.log(response);
    }).catch(function (error) {
        console.log(error);
    })
}

// 调用链码
const putChainCodeInvoke = () => {
    axios.put('prefix/api/entity/peers/' + peerNodeStore.peerNodeName + '/cmd', {
        Cmd: "CHAINCODE_INVOKE",
        NodeName: peerNodeStore.peerNodeName,
        Name: chaincode.name,
        Version: "1.0",
        Lang: "golang",
        Path: "sacc/sacc",
        ChannelId: channel.name,
        Json: jsonInput.input
    }).then(function (response) {
        msg.value = response.data.msg;
        console.log(response);
    }).catch(function (error) {
        console.log(error);
    })
}

// 查询链码
const putChainCodeQuery = () => {
    axios.put('prefix/api/entity/peers/' + peerNodeStore.peerNodeName + '/cmd', {
        Cmd: "CHAINCODE_QUERY",
        NodeName: peerNodeStore.peerNodeName,
        Name: chaincode.name,
        Version: "1.0",
        Lang: "golang",
        Path: "sacc/sacc",
        ChannelId: channel.name,
        Json: jsonInput.input
    }).then(function (response) {
        msg.value = response.data.msg;
        console.log(response);
    }).catch(function (error) {
        console.log(error);
    })
}

// 链码切换时Json默认输入的变化
const jsonInput = reactive({
    input: ""
})
const handleChainCodeChanged = () => {
    let length = chaincodeInfo.value == null ? 0 : chaincodeInfo.value.length;
    for (let i = 0; i < length; i++) {
        console.log(chaincodeInfo.value.Name + " " + chaincode.name);
        if (chaincodeInfo.value[i].Name == chaincode.name) {
            switch (commandSelected.value) {
                case ("8"): {                               // 初始化链码
                    jsonInput.input = chaincodeInfo.value[i].Init;
                    break;
                }
                case ("9"): {                               // 调用链码
                    jsonInput.input = chaincodeInfo.value[i].Invoke;
                    break;
                }
                case ("10"): {                              // 查询链码
                    jsonInput.input = chaincodeInfo.value[i].Query;
                    break;
                }
            }
        }
    }
    console.log(jsonInput.input);
}


</script>
  
<style scoped>
.table {
    width: 100%;
    font-size: 14px;
}

.options {
    margin-top: 6px;
    margin-bottom: 6px;
}

#header {
    height: 60px;
    background-color: rgba(220, 220, 220, 0.315);
    display: flex;
    align-items: center;
    text-align: left;
    font-weight: 510;
    font-size: medium;
}

.container {
    margin-top: 25px;
    margin-right: auto;
    margin-left: auto;
    padding: 0;
}

.mr10 {
    margin-right: 10px;
}

.EnhancedTableToolbar-title-373 {
    flex: 0 0 auto;
}

.handle-box {
    margin-bottom: 20px;
}

.MspTable-root-444 {
    margin-top: 24px;
}

.MuiPaper-elevation2-346 {
    box-shadow: 0px 1px 5px 0px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 3px 1px -2px rgb(0 0 0 / 12%);
}

.MuiPaper-rounded-343 {
    border-radius: 4px;
}
</style>
  